import { Button, Space, Table } from "antd";
import { useEffect, useState } from "react";
import { ColumnsType } from "antd/lib/table";

import { getProList } from "@/api/pro";

const columns: ColumnsType<never> = [
  {
    title: "序号",
    render: (column, row, index: number) => {
      return index + 1;
    },
  },
  {
    title: "产品名称",
    dataIndex: "proname",
  },
  {
    title: "产品分类",
    dataIndex: "category",
  },
  {
    title: "操作",
    render: (column, row: any) => {
      return (
        <Space>
          <Button disabled={row.issale === 0}>下架</Button>
          <Button disabled={row.issale === 1}>上架</Button>
        </Space>
      );
    },
  },
];

function BasicList() {
  const [pageNumber, setPageNumber] = useState(1);
  const [pageSize, setPageSize] = useState(5);
  const [total, setTotal] = useState(1);

  const [dataSource, setDataSource] = useState([]);

  /**
   * 分页改变
   */
  function onChange(page: number, pageSize: number) {
    console.log(page, pageSize);
    setPageNumber(page);
    setPageSize(pageSize);
    //  fetchData() 数据有问题的
  }

  useEffect(() => {
    function fetchData() {
      getProList(pageNumber, pageSize).then((response: any) => {
        console.log(response);
        setDataSource(response.data);
        setTotal(response.total);
      });
    }
    fetchData();
  }, [pageNumber, pageSize]);

  return (
    <div>
      <div className="page-header">
        <div className="handle">
          <Button>新增</Button>
        </div>
      </div>
      <Table
        rowSelection={{}}
        dataSource={dataSource}
        columns={columns}
        rowKey="proid"
        pagination={{
          total: total,
          current: pageNumber,
          pageSize: pageSize,
          onChange: onChange,
        }}
      />
      ;
    </div>
  );
}

export default BasicList;
